<template>
  <div class="page-wrapper">
    <page-card title="电费单输入">
      <el-form ref="form" :model="form" label-width="auto">
        <div class="title">用户基本信息</div>
        <div class="row">
          <el-form-item label="用户户号">
            <el-input v-model="form.name1" size="small" placeholder="请输入用户户号"></el-input>
          </el-form-item>
          <el-form-item label="用户单位">
            <el-input v-model="form.name2" size="small" placeholder="请输入用户单位"></el-input>
          </el-form-item>
          <el-form-item label="行业类别">
            <el-select size="small" placeholder="请选择行业类别">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="row">
          <el-form-item label="电压等级">
            <el-select size="small" placeholder="请选择电压等级">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间" class="demonstration">
            <el-date-picker v-model="value1" size="small" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="用电类别">
            <el-select size="small" placeholder="请选择电压等级">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="title">电量信息</div>
        <div class="row">
          <el-form-item label="有功尖合计电量">
            <el-input v-model="form.name7" size="small" placeholder="请输入有功尖合计电量"></el-input>
          </el-form-item>
          <el-form-item label="有功峰合计电量">
            <el-input v-model="form.name8" size="small" placeholder="请输入有功峰合计电量"></el-input>
          </el-form-item>
          <el-form-item label="有功平合计电量">
            <el-input v-model="form.name9" size="small" placeholder="请输入有功平合计电量"></el-input>
          </el-form-item>
        </div>
        <div class="row">
          <el-form-item label="有功谷合计电量">
            <el-input v-model="form.name10" size="small" placeholder="请输入有功谷合计电量"></el-input>
          </el-form-item>
          <el-form-item label="损耗电量">
            <el-input v-model="form.name11" size="small" placeholder="请输入损耗电量"></el-input>
          </el-form-item>
          <el-form-item label="用电类型">
            <el-input v-model="form.name12" size="small" placeholder="请输入用电类型"></el-input>
          </el-form-item>
        </div>
        <div class="title">功率因数信息</div>
        <div class="row">
          <el-form-item label="考核功率因数">
            <el-input v-model="form.name13" size="small" placeholder="请输入考核功率因数"></el-input>
          </el-form-item>
          <el-form-item label="实际功率因数">
            <el-input v-model="form.name14" size="small" placeholder="请输入功率因数"></el-input>
          </el-form-item>
          <el-form-item label="加减比例">
            <el-input v-model="form.name15" size="small" placeholder="请输入加减比例"></el-input>
          </el-form-item>
        </div>
        <div class="title">电价信息</div>
        <div class="row">
          <el-form-item label="尖电价">
            <el-input v-model="form.name16" size="small" placeholder="请输入尖电价"></el-input>
          </el-form-item>
          <el-form-item label="峰电价">
            <el-input v-model="form.name17" size="small" placeholder="请输入峰电价"></el-input>
          </el-form-item>
          <el-form-item label="平电价">
            <el-input v-model="form.name18" size="small" placeholder="请输入平电价"></el-input>
          </el-form-item>
          <el-form-item label="谷电价">
            <el-input v-model="form.name19" size="small" placeholder="请输入谷电价"></el-input>
          </el-form-item>
        </div>
        <div class="row">
          <div style="width: 50%;">
            <div class="title">计费信息</div>
            <div class="row">
              <el-form-item label="计费需量">
                <el-input v-model="form.name20" size="small" placeholder="请输入计费量"></el-input>
              </el-form-item>
              <el-form-item label="计费容量">
                <el-input v-model="form.name21" size="small" placeholder="请输入计费容量"></el-input>
              </el-form-item>
            </div>
          </div>
          <div style="width: 50%; margin-left: 100px;">
            <div class="title">电费信息</div>
            <div class="row">
              <el-form-item label="力调电费">
                <el-input v-model="form.name22" size="small" placeholder="请输入力调电费"></el-input>
              </el-form-item>
              <el-form-item label="总电费">
                <el-input v-model="form.name23" size="small" placeholder="请输入总电费"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="row" style="justify-content: center; margin-bottom: 30px;">
          <el-button type="primary" disabled>提交</el-button>
          <spliter :width="200" />
          <el-button type="info">取消</el-button>
        </div>
      </el-form>
    </page-card>
  </div>
</template>

<script>
import PageCard from "@/components/PageCard";
import Spliter from "@/components/Spliter";
export default {
  components: {
    PageCard,
    Spliter
  },
  data() {
    return {
      form: {},
      options1: [{ value: "", label: "" }],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      value1: ""
    };
  }
};
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 20px;
  font-size: 28px;
  text-align: left;
  font-weight: bold;
  &:nth-child(1) {
    margin-top: 20px;
  }
}
.el-form {
  margin: 0 20px;
}
.page-wrapper {
  padding: 14px;
  padding-right: 40px;
  .row {
    display: flex;
    justify-content: space-between;
    margin: 0;
    .el-form-item {
      flex: 1;
      margin-left: 100px;
      &:nth-child(1) {
        margin-left: 0;
      }
    }
    .title {
      margin-top: 0;
    }
  }
}
/deep/ .el-form-item {
  .el-input__inner {
    border-radius: 0;
  }
}
.el-select,
.el-date-editor,
.el-date-picker {
  width: 100%;
}
</style>
